<template>
    <!--订单页面-->
    <div class="order">
        <HeaderTop title="订单页面"></HeaderTop>
        <div class="order_no_login" v-if="!userInfo._id">
          <img src="../Home/images/order/person.png">
          <h3>登录后查看外卖订单</h3>
          <button @click="$router.push('/login')">立即登陆</button>
        </div>
        <div class="order_no_order" v-if="!order.length">
            <img src="../Home/images/order/person.png">
            <h3>空空如也，快去订餐吧！</h3>
        </div>
        <div class="showOrder" v-if="order.length">
            <ul>
              <li class="food-item bottom-border-1px" v-for="(food, index) in order[0]" :key="index">
                <div class="icon">
                  <img width="57" height="57" :src="food.icon">
                </div>
                <div class="content">
                  <h2 class="name">{{food.name}}</h2>
                  <p class="desc">{{food.description}}</p>
                  <div class="extra">
                    <span class="count">月售{{food.sellCount}}份</span>
                    <span>好评率{{food.rating}}%</span>
                  </div>
                  <div class="price">
                    <span class="now">￥{{food.price}}</span>
                    <span class="old" v-if="food.oldPrice">￥{{food.oldPrice}}</span>
                  </div>
                </div>
              </li>
            </ul>
            <h3 class="msg"> <i class="iconfont icon-waimai"></i> 骑手派送中......</h3>
        </div>
    </div>
</template>

<script>
import HeaderTop from '../../components/HeaderTop/HeaderTop.vue'
import {mapState} from 'vuex'
export default {
  components: {
    HeaderTop
  },
  computed: {
    ...mapState(['userInfo', 'order'])
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import "../../common/stylus/mixins.styl"
.order  //订单
    width 100%
    .order_no_login
        padding-top 140px
        width 60%
        margin 0 auto
        text-align center
        >img
            display block
            width 100%
            height 30%
        >h3
            padding 10px 0
            font-size 17px
            color #6a6a6a
        >button
            display inline-block
            background #02a774
            font-size 14px
            color #fff
            border 0
            outline none
            border-radius 5px
            padding 10px 20px

    .order_no_order
        padding-top 140px
        width 60%
        margin 0 auto
        text-align center
        >img
            display block
            width 100%
            height 30%
        >h3
            padding 10px 0
            font-size 17px
            color #6a6a6a

    .showOrder
      padding-top 60px
      .msg{
        margin-left: 120px;
        padding 10px 0
        font-size 17px
        color #6a6a6a
      }
      .food-item {
        display: flex;
        margin: 0 18px;
        padding-bottom: 18px;
        bottom-border-1px(rgba(7, 17, 27, 0.1));

        &:last-child {
          border-none();
          margin-bottom: 0;
        }

        .icon {
          flex: 0 0 57px;
          margin-right: 10px;
        }

        .content {
          flex: 1;

          .name {
            margin: 2px 0 8px 0;
            height: 14px;
            line-height: 14px;
            font-size: 14px;
            color: rgb(7, 17, 27);
          }

          .desc, .extra {
            line-height: 10px;
            font-size: 10px;
            color: rgb(147, 153, 159);
          }

          .desc {
            line-height: 12px;
            margin-bottom: 8px;
          }

          .extra {
            .count {
              margin-right: 12px;
            }
          }

          .price {
            font-weight: 700;
            line-height: 24px;

            .now {
              margin-right: 8px;
              font-size: 14px;
              color: rgb(240, 20, 20);
            }

            .old {
              text-decoration: line-through;
              font-size: 10px;
              color: rgb(147, 153, 159);
            }
          }
        }
      }
</style>
